<template>
  <el-breadcrumb
    class="app-breadcrumb"
     v-if="routerList.length"
    separator="/"
  >
    <transition-group name="breadcrumb">
      <el-breadcrumb-item
        v-for="(item, index) in routerList"
        :key="index"
      >
        <span
          @click="toNext(item, index)"
        >
          {{item.name}}
      </span>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>

export default {
  computed: {
  },
  data () {
    return {
      routerList: []
    }
  },
  watch: {
    $route (o, n) {
      if (this.$route.meta.routerList && this.$route.meta.routerList.length && o.path !== n.path) {
        this.routerList = [...this.$route.meta.routerList, { name: this.$route.name }]
      } else {
        this.routerList = []
      }
    }
  },
  created () {
    if (this.$route.meta.routerList && this.$route.meta.routerList.length) {
      this.routerList = [...this.$route.meta.routerList, { name: this.$route.name }]
    } else {
      this.routerList = []
    }
  },
  methods: {
    toNext (item, index) {
      if (item.to) {
        this.$router.push({
          path: item.to,
          name: item.name
        })
      } else {
        console.log(1 + index - this.routerList.length)
        if (1 + index - this.routerList.length >= 0) {
          return
        }
        this.$router.go(1 + index - this.routerList.length)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  font-size: 0.7vw;
  display: flex;
  padding-left: 1.5vw;
  align-items: center;
  height: 4.8vh;
  background: #fff;
  border-bottom: 1px solid #eee;
  a {
    font-weight: normal;
  }
  .no-redirect {
    color: #333333;
    cursor: text;
  }
  ::v-deep .el-breadcrumb__item {
    .no-redirect {
      color: #999 !important
    }
    .el-breadcrumb__inner {
      color: #999 !important
    }
    .el-breadcrumb__inner a {
      color: #999 !important
    }
  }
  ::v-deep .el-breadcrumb__item:last-child {
    .el-breadcrumb__inner {
      color: #333333 !important
    }
    .el-breadcrumb__inner a {
      color: #333333 !important
    }
  }
}
</style>
